<template>
	<el-card class="box-card">
		<div slot="header" class="search-div">
			<el-form :inline="true">
			  <el-form-item label="表名">
			    <el-input size="small" placeholder="请输入表名" v-model="searchWord" clearable/>
			  </el-form-item>
			  <el-form-item>
				<el-button type="success" plain @click="searchConidtion()"class="el-icon-search" size="small">查询</el-button>
				<el-button type="primary" plain  @click="addDialog = true"class="el-icon-plus" size="small">创建表</el-button>
				<span style="color: red;" v-if="is2x">注意：2.x版本查询所有普通表的速度较慢，请不要着急</span>
				  </el-form-item>
			</el-form>
		</div>
		<el-table :data="tableData.slice((page-1)*limit,page*limit)" v-loading="loading" border style="width: 100%" :highlight-current-row="true">
			<el-table-column fixed="left" label="序号" type="index" width="50"></el-table-column>
			<el-table-column prop="table_name" label="表名"></el-table-column>
			<el-table-column prop="columns" label="列数" width="120" v-if="is2x"></el-table-column>
			<el-table-column prop="created_time" label="创建时间" width="200" v-if="is2x"></el-table-column>
			<el-table-column fixed="right" label="操作" width="200">
				<template slot-scope="scope">
					<el-button @click="design(scope.row)" type="text" size="small">设计表</el-button>
					<el-button @click="search(scope.row)" type="text" size="small">查询表</el-button>
					<el-button @click="del(scope.row)" type="text" size="small">删除表</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination v-if="total>10" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 50,100]"
		 	:page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total" 
		 	style="margin-top: 10px;float: right">
		</el-pagination>
		
		<el-dialog :close-on-click-modal="false" :before-close="cancelAdd" :visible.sync="addDialog" title="创建表">
			<el-form :model="tableForm" ref="tableForm" :rules="stableRules" label-width="80px">
				<el-form-item label="表名称" prop="tableName">
					<el-input v-model="tableForm.tableName" maxlength="150"></el-input>
				</el-form-item>
				<el-form-item label="主键名称" prop="columnName">
					<el-input v-model="tableForm.columnName" maxlength="150"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelAdd" size="medium">取 消</el-button>
				<el-button type="primary" @click="confirmAdd('tableForm')" size="medium">确 定</el-button>
			</div>
		</el-dialog>
		
	</el-card>
</template>

<script>
	import {mapGetters} from 'vuex'
	import * as taos from '../../api/taosrestful'
	import bus from '../../utils/bus'

	export default {
		name: "taostable",
		data() {
			return {
				loading:true,
				addDialog: false,
				tableData: [],
				tableForm: {},
				stableRules:{
					tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
					columnName: [{ required: true, message: '请输入主键列名', trigger: 'blur' }]
				},
				page: 1,
				limit: 10,
				total: 0,
				is2x:false,
				searchWord:''
			}
		},
		created() {
			// this.init()
		},
		computed: {
			...mapGetters(['curObject'])
		},
		beforeDestroy () {//页面销毁时需要解绑
		    bus.$off("changeCurObject_table");
		},
		mounted() {
			var that = this;
			bus.$on('changeCurObject_table', function(p) {
				that.init();
			})
		},
		methods: {
			init() {
				this.loading = true;
				let link = this.curObject.link
				let payload = {ip: link.host,port: link.port,user: link.user,password: link.password}
				taos.showTables(this.curObject.dbName,null, payload,this.searchWord).then(data => {
					this.tableData = []
					this.loading = false
					if (data.res) {
						let that = this
						if(data.version=='2.x'){
							this.is2x = true
							data.data.forEach(function(item){
								if(item.stable_name.length==0){
									that.tableData.push(item)
								}	
							})
						}else{
							this.is2x = false
							data.data.forEach(function(item){
								that.tableData.push(item)
							})
						}
						this.total = this.tableData.length
					} else {
						this.$message({message: data.msg,type: 'error',duration: 1000})
					}
				})
			},
			handleSizeChange(val){
				this.limit = val
			},
			handleCurrentChange(val){
				this.page = val
			},
			searchConidtion(){
				this.page = 1
				this.limit = 10
				this.init()
			},
			cancelAdd(){
				this.addDialog = false
			},
			search(row) {
				let action = 'tsearch'
				let tableName = row.table_name
				bus.$emit('addTab', '查询表【'+tableName+'】', tableName, action)
				localStorage.setItem(action+'_'+tableName, JSON.stringify({'name':tableName,'isNew':false}))
			},
			confirmAdd() {
				this.$refs['tableForm'].validate((valid) => {
				  if (valid) {
					  this.addDialog = false
					  let action = 'tnew'
					  let tableName = this.tableForm.tableName
					  bus.$emit('addTab', '创建表【'+tableName+'】', tableName, action)
					  localStorage.setItem(action+'_'+tableName, JSON.stringify({'name':tableName,'columnName':this.tableForm.columnName,'isNew':true}))
				  }
				})
			},
			design(row) {
				let action = 'tedit'
				let tableName = row.table_name
				bus.$emit('addTab', '设计表【'+tableName+'】', tableName, action)
				localStorage.setItem(action+'_'+tableName, JSON.stringify({'name':tableName,'isNew':false}))
			},
			del(row) {
				this.$confirm('请确定是否删除表【' + row.table_name + '】', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let link = this.curObject.link
					let payload = {ip: link.host,port: link.port,user: link.user,password: link.password}
					taos.dropTable(this.curObject.dbName,row.table_name, payload).then((response) => {
						this.$message({type: 'success',message: '操作成功!'})
						this.init()
					})
				}).catch(function(error) {
					console.log(error)
				})
			}
		},
	}
</script>